<template>
    <div class="hot-list">
        <div class="song-area" v-for="(item, index) in arr_privileges" :key="index" >
            <div class="level-box">
                <p> {{index+1}} </p>
            </div>
            <div class="song-box">
                <SongInfo
                :song_name="item.name" 
                :song_art="item.ar[0].name" 
                :song_album="item.al" 
                :song_belong_playlist = "song_belong_list" 
                :song_id = "item.id"
                :song_alias = "''" 
                ></SongInfo>
            </div>
        </div>
    </div>
</template>

<script>
import SongInfo from "@/components/SongInfo";

export default {
    name: "hotlist",
    created() {
        this.axios.get('/top/list?idx=1').then(res =>{
            res.data.playlist.tracks.forEach(element =>{
                this.song_belong_list.push([element.id, element.al.picUrl, element.name, element.ar[0].name]);
            })
            this.img_url = res.data.playlist.coverImgUrl;

            res.data.playlist.tracks.forEach(element => {
                this.arr_privileges.push(element);
            });
        })
    },
    data() {
        return {
            img_url: '',
            arr_privileges: [],
            song_belong_list: []
        }
    },
    components: {
        SongInfo
    }
}
</script>

<style lang="scss" scoped>
    .hot-list{
        margin-top: 48px;
        margin-bottom: 60px;
    }
    .cover-box{
        width: 100px;
        height: 100px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .song-area{
        width: 100%;
        height: 50px;
        .level-box, .song-box{
            display: inline-block;
            vertical-align: top;
            height: 100%;
        }
        .level-box{
            width: 50px;
            line-height: 50px;
            font-size: 24px;
            color: #eeeeee;
            // background-color: #fff;
        }
        .song-box{
            width: calc( 100% - 50px );
        }
    }
</style>
